@charset "utf-8";
@import "common/reset";

@function n($px){
    @return $px/2;
}
$border-color:#ff9344;//边框颜色
.web{
    width: 100%;
    position: relative;
    overflow: hidden;
    header{
        overflow: hidden;
        height:n(62px);
        margin-top:n(45px);
        .left{
            width: n(124px);
            height: n(60px);
            border: 1px solid $border-color;
            border-radius: 25px;
            text-align: center;
            line-height: n(60px);
            vertical-align: middle;
            font-size: n(20px);
            margin-left: n(24px);
            a{
                color: black;
                display: block;     
            }
        }
        .right{
            width: n(75px);
            margin-right: n(14px);
             i{
                 font-size: n(48px);
                 color: $border-color;
             }
        }
        .middle{
            overflow: hidden;
            text-align: center;
            line-height: n(62px);
            vertical-align: middle;
            font-size: n(24px);
        }
        
    }
    nav{
        width: 100%;
        padding-left: n(23px);
        padding-right: n(22px);
        margin-top: n(30px);
        .details_img{
            width: 100%;
            img{
                width: 100%;
                height: n(262px);
            }
        }
    }
    section{
        width: 100%;
        overflow: hidden;
        margin-top: n(36px);
        .buy_top{
            width: 100%;
            height: n(62px);
            overflow: hidden;
            line-height: n(62px);
            padding: 0 n(40px);
            .buy_top_left{
                
                font-size: n(72px);
                color:$border-color
            }
            .buy_top_right{
                width: n(112px);
                height: n(62px);
                border-radius: 25px;
                background-color: $border-color;
                text-align: center;
                a{
                    color: white;
                }
            }
        }
        .buy_bottom{
           width: 100%;
            height: n(62px);
            overflow: hidden;
            line-height: n(62px);
            padding: 0 n(40px);
            margin-top: n(50px);
            font-size: n(30px);
            color: $border-color;
            .buy_bottom_left{
                a{
                    color: black;
                }
            }
            .buy_bottom_right{
                color: #8e8e8e;
            }
        }
    }
    section{
        &:nth-of-type(2){
            margin-bottom: 60px;
        }
        &:nth-of-type(2){
            padding: 0 n(44px);
        }
        .shiyong{
            background-color: $border-color;
            color: white;
            font-size: n(30px);
            a{
                display: block;
                float: right;
                color: white;
            }
            span{
                display: block;
                float: left;
            }
        }
        .shanghu{
            width: 100%;
            height: n(177px);
            .shanghu_img{
                width: n(177px);
                height: n(177px);
                float: left;
                img{
                    height: 100%;
                    position: absolute;
                    top: -999px;
                    left: -999px;
                    right: -999px;
                    bottom: -999px;
                    margin: auto;
                }
            }
            .jinru{
                width: n(112px);
                height: n(177px);
                float: right;
                line-height: n(60px);
                a{
                    margin-top: n(77px);
                    display: block;
                    height: n(60px);
                    width: n(112px);
                    background-color: $border-color;
                    color: white;
                    text-align: center;
                    border-radius: 25px;
                }
            }
            .shanghu_xiangqing{
                overflow: hidden;
               height: n(177px);
               ul{
                   margin-left: n(24px);
                   li{
                       font-size:n(30px);
                       margin-top: n(8px);
                       &:nth-of-type(2){
                           color: #929292;
                           font-size:n(26px);
                           i{
                               color: $border-color;
                           }
                           
                       }
                       &:nth-of-type(3){
                           color: #929292;
                           font-size:n(24px);
                       }
                       &:nth-of-type(4){
                           font-size:n(20px);
                           a{
                               color:$border-color;
                           }
                       }
                   }
               }
                
            }
        }
    }
     footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: white;
        ul {
            li {
                float: left;
                width: 25%;
                a {
                    display: block;
                    text-align: center;
                    color: black;
                    i {
                        font-size: n(68px);
                        color: $border-color;
                    }
                    h2 {
                        font-size: n(26px);
                        margin-top: n(9px);
                        margin-bottom: n(14px);

                    }
                }
            }
        }
    }
}
